<template>
  <div class="personal-box">
    <van-nav-bar
      title="个人信息"
      left-arrow
      @click-left="onClickLeft"
    />

    <van-cell-group class="user-container">
      <van-uploader
        :after-read="onClickUserImg"
        accept="image/jpeg, image/jpg, image/png"
        class="user-img"
      >
        <span class="van-cell-text">头像</span>
        <img class="user-img-img" :src="form.imgUrl" alt="">
        <van-icon class="user-img-arrow" name="arrow" />
      </van-uploader>

      <van-cell title="昵称" is-link @click="onClickShowEdit('userName', 1)">
        <span>{{ form.userName }}</span>
      </van-cell>
    </van-cell-group>

    <van-cell-group class="user-container">
      <van-cell title="联系电话" is-link @click="onClickShowEdit('phoneNum', 1)">
        <span>{{ form.phoneNum }}</span>
      </van-cell>
      <van-cell title="微信号" is-link @click="onClickShowEdit('wechatNum', 1)">
        <span>{{ form.wechatNum }}</span>
      </van-cell>

      <van-uploader
        :after-read="onClickWechatImg"
        accept="image/jpeg, image/jpg, image/png"
        class="user-img"
      >
        <span class="van-cell-text">微信二维码</span>
        <img class="user-img-img" :src="form.wechatImgUrl" alt="">
        <van-icon class="user-img-arrow" name="arrow" />
      </van-uploader>
    </van-cell-group>

    <van-cell-group class="user-container">
      <van-cell title="性别" >
        <span>{{ form.sex }}</span>
      </van-cell>
      <van-cell title="生日" is-link @click="onClickBrithPop">
        <span>{{ form.birthDate }}</span>
      </van-cell>
      <van-cell title="行业" >
        <span>{{ form.job }}</span>
      </van-cell>
      <van-cell title="职业" >
        <span>{{ form.career }}</span>
      </van-cell>
    </van-cell-group>

    <van-cell-group class="user-container">
      <section
        class="section-select"
      >
        <div class="section-title">
          <span class="section-select-text">所在城市</span>
          <van-icon class="section-select-arrow" name="arrow" />
        </div>
        <p class="section-content c-gray">
          <template v-for="(item, index) in form.city">
            <span v-if="index === form.city.length - 1">{{ item }}</span>
            <span v-else>{{ item }}、</span>
          </template>
        </p>
      </section>

      <section
        class="section-select"
      >
        <div class="section-title">
          <span class="section-select-text">标签</span>
          <van-icon class="section-select-arrow" name="arrow" />
        </div>
        <p class="section-content c-gray">
          <template v-for="(item, index) in form.label">
            <span v-if="index === form.label.length - 1">{{ item }}</span>
            <span v-else>{{ item }}、</span>
          </template>
        </p>
      </section>

      <section
        class="section-select"
        @click="onClickShowEdit('introduction', 3)"
      >
        <div class="section-title">
          <span class="section-select-text">个人介绍</span>
          <van-icon class="section-select-arrow" name="arrow" />
        </div>
        <p class="section-content c-black">
          {{ form.introduction }}
        </p>
      </section>
    </van-cell-group>

    <!-- 编辑 -->
    <van-popup v-model="showEdit" position="right" class="pop-edit">
      <van-nav-bar
        title="编辑"
        left-text="取消"
        right-text="完成"
        left-arrow
        @click-left="onClickEditLeft"
        @click-right="onClickEditRight"
      />
      <van-cell-group>
        <van-field
          v-model="editVal"
          type="textarea"
          :rows="editRow"
          autosize
          placeholder="请输入"
        />
      </van-cell-group>
    </van-popup>

    <!-- 生日选择 -->
    <van-popup v-model="showDialogBirth" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="onClickBrithConfirm"
        @cancel="onClickBrithCancel"
      />
    </van-popup>
  </div>
</template>

<script>
  import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Button,
    Row,
    Col,
    Search,
    Tabbar,
    TabbarItem,
    Icon,
    Uploader,
    Popup,
    DatetimePicker
  } from 'vant';
  import {formatDate} from '../../../static/js/format-date.js'
  export default {
    components: {
      [NavBar.name]: NavBar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Field.name]: Field,
      [Button.name]: Button,
      [Row.name]: Row,
      [Col.name]: Col,
      [Search.name]: Search,
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [Icon.name]: Icon,
      [Uploader.name]: Uploader,
      [Popup.name]: Popup,
      [DatetimePicker.name]: DatetimePicker,
    },
    data() {
      return {
        showEdit: false,
        showDialogBirth: false,
        minDate: new Date(-2209017600000),
        maxDate: new Date(),
        currentDate: new Date(),
        editKey: '',
        editVal: '',
        editRow: 1,
        form: {
          imgUrl: '../../../static/img/login.png',
          // 上传图片formdata
          imgArr: '',
          userName: '这里是用户昵称',
          phoneNum: '13000000000',
          wechatNum: 'liangliang',
          wechatImgUrl: '../../../static/img/login.png',
          birthDate: '1990/01/01',
          city: ['上海', '北京'],
          label: ['标签1', '标签2', '标签3', '标签4'],
          introduction: '如果你无法简洁的表达你的想法，那只说明你还不够了解它。 -- 阿尔伯特·爱因斯坦',
          sex: '男',
          job: 'IT',
          career: '微商'
        }
      }
    },
    mounted() {

    },
    methods: {
      onClickLeft() {
        this.$router.go(-1);
      },
      onClickUserImg(file) {
        // 选择用户头像
        this.form.imgUrl = file.content;

        // 用户头像长度一直为1
        let formData = new FormData();
        formData.append('file', file.file);
        this.form.imgArr = formData;
      },
      onClickWechatImg(file) {
        // 选择用户头像
        this.form.wechatImgUrl = file.content;
      },
      onClickEditLeft() {
        this.showEdit = !this.showEdit;
      },
      onClickEditRight() {
        // 点击完成按钮
        this.showEdit = !this.showEdit;
        this.form[this.editKey] = this.editVal;
      },
      onClickShowEdit(key, row) {
        this.showEdit = !this.showEdit;
        this.editKey = key;
        this.editVal = this.form[this.editKey];
        this.editRow = row;
      },
      onClickBrithPop() {
        // 生日选择
        this.showDialogBirth = true;
      },
      onClickBrithConfirm(val) {
        let date = formatDate(val, 'yyyy/MM/dd')
        this.form.birthDate = date;
        this.showDialogBirth = false;
      },
      onClickBrithCancel() {
        this.showDialogBirth = false;
      },
    }
  }
</script>

<style scoped="scoped">
.c-black {
  color: #000;
}
.c-gray {
  color: #99989D;
}
.personal-box {
  height: 100%;
  background-color: #E8E8E8;
}
.c-padding {
  padding: 10px 30px;
}
.user-container {
  margin-bottom: 5px;
}
.user-img {
  position: relative;
  height: 76px;
  line-height: 76px;
  width: calc(100% - 30px);
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.user-img-txt {
  text-align: right;
  margin-right: 52px;
}
.user-img-img {
  position: absolute;
  top: 27px;
  right: 40px;
  text-align: right;
  width: 52px;
  height: 52px;
  line-height: 32px;
}
.user-img-arrow {
  position: absolute;
  top: 43px;
  right: 15px;
  font-size: 18px;
  color: #999;
}
.section-select {
  position: relative;
  line-height: 30px;
  width: calc(100% - 30px);
  padding: 15px;
  border-bottom: 1px solid #e5e5e5;
}
.section-title {
  width: 100%;
  height: 30px;
  line-height: 30px;
}
.section-content {
  width: 100%;
  line-height: 30px;
  font-size: 14px;
}
.section-select-text {
  float: left;
  line-height: 30px;
}
.section-select-arrow {
  float: right;
  line-height: 30px;
}
.pop-edit {
  width: 100%;
  height: 100%;
  background-color: #fff;
}
</style>